<script setup>
import { computed, ref, watch } from "vue";

const props = defineProps(["total", "pageSize", "currentPage"]);
const emits = defineEmits(["currentChange", "update:currentPage"]);

// const currentPage = ref(1);
const currentPage = computed({
  get: () => props.currentPage,
  set: (val) => {
    emits("update:currentPage", val);
  },
});
const currentPageIpt = ref(1);
watch(
  currentPage,
  (val) => {
    currentPageIpt.value = val;
  },
  { deep: true }
);

// 计算最大页码
const maxPage = computed(() => Math.ceil(props.total / props.pageSize));

const handleCurrentChange = (val) => {


  // 边界限制
  const newPage = Math.max(1, Math.min(Number(val), maxPage.value));
  currentPage.value = newPage;
  currentPageIpt.value = newPage;
  emits("currentChange", newPage);
};
</script>

<template>
  <div class="pageBox">
    <div class="text-gray-14">共 {{ total }} 条</div>
    <el-pagination
      v-model:current-page="currentPage"
      :page-size="pageSize"
      :background="false"
      layout=" prev, pager, next"
      :total="total"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
    <div class="jumper">
      <div class="text-gray-14">跳转到</div>
      <el-input
        class="jumper-ipt"
        v-model.number="currentPageIpt"
        @change="handleCurrentChange"
      />
      <div class="text-gray-14">页</div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.pageBox {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  .el-pagination {
    --el-pagination-bg-color: none;
    --el-pagination-hover-color: #c9e9f8;
    --el-pagination-button-color: rgba(201, 233, 248, 0.6);
  }
  ::v-deep .el-pagination button:disabled {
    background-color: transparent;
  }
  ::v-deep .el-pager {
    gap: 0.75rem;
    li {
      border: 1px solid rgba(201, 233, 248, 0.6);
      color: rgba(201, 233, 248, 0.6);
    }
    li.is-active,
    li:hover {
      color: #c9e9f8;
      border: 1px solid #2d80ff;
      font-weight: normal;
    }
  }
  .jumper {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    .jumper-ipt {
      width: 2.75rem;
      height: 2rem;
      border: 1px solid rgba(201, 233, 248, 0.6);
      ::v-deep .el-input__wrapper {
        padding: 0;
        background: transparent;
        box-shadow: none;
      }
      ::v-deep .el-input__inner {
        text-align: center;
        color: rgba(201, 233, 248, 0.6);
      }
    }
  }
  .text-gray-14 {
    font-size: 0.875rem;
    color: #c9e9f8;
  }
}
</style>
